<template>
  <div
    id="talentCollection"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <div class="count" v-if="count != ''">
      共
      <span>{{ count }}</span>个收藏
    </div>
    <div class="listBox" v-if="talentList.length != 0">
      <div class="listItem" v-for="(item, index) in talentList" :key="'a' + index">
        <div class="topBox" @click="go_to_page01(item.authorId)">
          <img :src="item.logo" />
          <div class="infoRight">
            <div>
              <el-tooltip
                effect="light"
                :content="item.nickName"
                :hide-after="2000"
                placement="top"
                popper-class="mytooltip"
              >
                <p>{{ item.nickName }}</p>
              </el-tooltip>
              <!-- 企业认证为蓝色2 个人认证为黄色1 -->
              <img
                src="../../../../assets/wang/talentCompare/rzBlue.png"
                v-if="item.verifyType == 2"
              />
              <img
                src="../../../../assets/wang/talentCompare/rzOrange.png"
                v-if="item.verifyType == 1"
              />
            </div>
            <p class="textClass">
              抖音号：
              <span>{{ item.uniqueId }}</span>
            </p>
            <p class="textClass">
              简介：
              <span>{{ item.introduce }}</span>
            </p>
          </div>
        </div>
        <div class="dataBox">
          <div class="dataItem">
            <p>{{ format_num(item.totalFans) }}</p>
            <p>粉丝总量</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.totalFavorite) }}</p>
            <p>点赞总数</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.totalComment) }}</p>
            <p>评论总数</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.totalShare) }}</p>
            <p>分享总数</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.totalVideo) }}</p>
            <p>作品数</p>
          </div>
          <div class="dataItem">
            <p v-if="item.hint != 0">{{ format_num(item.hint) }}</p>
            <p v-if="item.hint == 0">--</p>
            <p>掌上指数</p>
          </div>
        </div>
        <div class="optionsBox">
          <el-popover placement="bottom" trigger="hover">
            <vue-qr
              :size="150"
              :margin="0"
              :auto-color="true"
              :dot-scale="1"
              :text="item.qrCodeLink"
            />
            <p
              style="
                text-align: center;
                font-size: 14px;
                color: #888888;
                margin-top: 10px;
              "
            >查看抖音主页</p>
            <img src="@/assets/wang/video/ewm.png" slot="reference" />
          </el-popover>
          <el-tooltip
            class="item"
            effect="light"
            content="取消收藏"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img src="@/assets/wang/video/liked.png" @click="cancelStar(item.authorId, index)" />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="达人详情"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img src="@/assets/wang/video/more.png" @click="go_to_page01(item.authorId)" />
          </el-tooltip>
        </div>
      </div>
    </div>
    <div
      v-loading="loading"
      v-if="!(talentList.length < (page - 1) * 20)"
      class="loading grayLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p
      class="nothing"
      v-show="talentList.length != 0 && talentList.length < (page - 1) * 20"
    >我是有底线的～</p>
    <div class="empty addTop" v-show="!loading && talentList.length == 0">
      <img src="@/assets/liu/zw.png" />
      <p>您还未收藏任何内容哦~</p>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr';
export default {
  name: 'talentCollection',
  components: {
    VueQr
  },
  data() {
    return {
      keyWords: '',
      talentList: [],
      page: 1,
      busy: false,
      loading: true,
      cancel: null,
      cancel01: null,
      count: ''
    };
  },
  computed: {},
  watch: {},
  created() {
    this.GetTalentList();
  },
  mounted() {},

  methods: {
    // 取消收藏
    cancelStar(id, index) {
      let that = this;
      that.$axios
        .post(
          '/api/collection/CancelCollection',
          {
            CollectId: id,
            Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.talentList.splice(index, 1);
            that.count--;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    toSearch() {},
    GetTalentList() {
      let that = this;
      that.loading = true;
      that.busy = true;
      that.$axios
        .get(
          '/api/collection/GetAuthorsCollection',
          {
            params: {
              pageIndex: that.page,
              pageSize: 20
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.page += 1;
            that.talentList = that.talentList.concat(res.data.data);
            that.count = res.data.count;
            res.data.data.length < 20 ? (that.busy = true) : (that.busy = false);
          } else if (res.data.code == 1002) {
            that.talentList = [];
          }
          that.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    loadMore() {
      this.GetTalentList();
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, '_blank');
    }
  }
};
</script>
<style lang="less" scoped>
#talentCollection {
  .count {
    padding-top: 20px;
    color: #888;
    font-size: 14px;
    span {
      color: #fd7f2c;
      font-family: DINAlternate-Bold;
    }
  }
  .addTop {
    margin-top: 150px;
  }
  .listBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .listItem {
      box-sizing: border-box;
      width: 49%;
      // height: 229px;
      background-color: #ffffff;
      border-radius: 4px;
      margin-top: 20px;
      position: relative;
      padding: 24px 20px 0 20px;
    }
    .topBox {
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      padding-bottom: 19px;
      border-bottom: solid 1px #e5e5e5;
      cursor: pointer;
      img {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
      }
      .infoRight {
        margin-left: 18px;
        flex: 1;
        div {
          width: 70%;
          padding-top: 3px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 14px;
            height: 14px;
            margin-left: 7px;
          }
          p {
            font-size: 16px;
            color: #222222;
            font-weight: 600;
            max-width: 70%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .textClass {
          font-size: 14px;
          color: #888888;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          padding-top: 5px;
          span {
            color: #222222;
          }
        }
      }
    }
    .dataBox {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 96px;
      .dataItem {
        flex: 1;
        p {
          text-align: center;
        }
        p:nth-of-type(1) {
          font-size: 18px;
          color: #222222;
          font-family: DINAlternate-Bold;
        }
        p:nth-of-type(2) {
          font-size: 14px;
          color: #888888;
        }
      }
    }
    .optionsBox {
      position: absolute;
      top: 24px;
      right: 24px;
      display: flex;
      img {
        width: 32px;
        height: 32px;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>
